<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>text-shadow</title>
  <style>
    .hello {
        text-align: center;
        font-size: 100px;
        /* 水平阴影 */
        /*text-shadow: 3px 0px 3px red;*/
        /*text-shadow: -3px 0px 3px red;*/
        /*text-shadow: 0px 3px 3px red;*/
        /*text-shadow: 0px -3px 3px red;*/
        text-shadow: 3px 5px 3px red;
    }
    .box1 {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: olivedrab;
        /*box-shadow: 3px 5px 3px red;*/
        /*box-shadow: 3px 5px 3px 10px red;*/
        /*box-shadow: 3px -5px 3px red;*/
        /*box-shadow: 0px 0px 10px red;*/
        /*box-shadow: 0px 0px 0px 20px red;*/
        box-shadow: 0px 0px 5px 10px red, 0px 0px 5px 15px orange, 0px 0px 5px 20px yellow, 0px 0px 5px 25px green, 0px 0px 5px 30px cyan, 0px 0px 5px 35px blue, 0px 0px 5px 40px purple;
        /*box-shadow: 3px 5px 4px red inset;*/
    }
    .box2 {
      border: 1px solid #333;
      height: 100px;
      width: 100px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <p class="hello">Hello world !</p>
 <div class="box1">box1</div>
 <div class="box2">box2</div>
</body>
</html>
